<!-- 文章详情，发布评论页面 -->

{{extend '../_layouts/home.html'}} {{block 'title'}}{{'多人博客 - 首页'}}{{/block}} {{block 'head'}}
<!-- <link rel="stylesheet" href="/public/css/markdown-github.css"> -->
<style>
    .panel .panel-heading .action i {
        margin-right: 10px;
    }
</style>
{{/block}} {{block 'body'}}
<section class="container">
    <div class="row">
        <div class="media-left">
            <a href="/settings/content?id={{ topic[0].user[0]._id }}">
                <img width="40" height="40" class="media-object" src="../{{topic[0].user[0].avatar}}"> {{ topic[0].user[0].nickname }}
            </a>
        </div>
        <div class="col-md-9" style="margin-top: -80px; margin-left: 70px;">
            <article class="markdown-body">
                <h1 id="_1"><a name="user-content-_1" href="#_1" class="headeranchor-link" aria-hidden="true"><span
                            class="headeranchor"></span></a>{{ topic[0].title }}</h1>
                <blockquote>
                    <p style="text-align: left; font-size: 10px;">{{ sd(topic[0].dateTime)}}</p>
                    <p>{{ topic[0].message}}</p>
                    <p class="hrp" style="display: none;">{{ topic[0]._id}}</p>
                </blockquote>
            </article>
            <div id="pinglun">
                <div class="wpl">
                    <p>暂时还没有评论！</p>
                </div>
                {{ each comments }}
                <div class="panel panel-default pl">
                    <div class="panel-heading">
                        <img src="../{{$value.user[0].avatar}}" alt="{{ $value.user[0].nickname}}" width="20px" height="20px">
                        <span>用户：{{ $value.user[0].nickname}}</span>
                        <span>邮箱：{{ $value.user[0].email}}</span>
                        <span>时间：{{ sd($value.dateTime)}}</span>
                        <span class="action">

                            <a href=""><i class="glyphicon glyphicon-thumbs-up pull-right"></i></a>
                            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
                            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>

                        </span>

                    </div>
                    <div class="panel-body">
                        {{ $value.comment }}


                    </div>
                </div>
                {{ /each}}
            </div>
            <hr> {{ if user }}
            <form id="show_form">
                <div class="form-group">
                    <label for="exampleInputPassword1">添加回复</label>
                    <input type="hidden" class="form-control" name="userId" id="textarea_title" value="{{ user._id }}"></input>
                    <input type="hidden" class="form-control" name="authorId" id="textarea_title" value="{{ topic[0].user[0]._id }}"></input>
                    <input type="hidden" class="form-control" name="activeId" id="contentID" value="{{topic[0]._id}}"></input>
                    <textarea class="form-control " name="comment" id="textarea_comment " cols="10 " rows="10 "></textarea>
                </div>
                <button type="submit " class="btn btn-success ">回复</button>
            </form>
            {{/if}}
        </div>
    </div>
</section>
<script src="/node_modules/jquery/dist/jquery.js "></script>
<script>
    var src = $('.hrp').html();
    console.log(src);
    $('#show_form').on('submit', function(e) {
        e.preventDefault()
        var formData = $(this).serialize()

        $.ajax({
            url: '/topic/show',
            type: 'post',
            data: formData,
            dataType: 'json',
            success: function(data) {
                window.alert('发布成功')

                window.location.href = '/topic/show?id=' + src;

            }
        })
    })
    if ($(".pl ").html()) {
        $(".wpl ").hide();
    }
</script>
{{/block}}